<template>
    <layout-center v-if="layout === 'center'">
        <template #default>
            <div class="has-text-centered mb-4">
                <h3 class="title is-4">
                    {{ $t('login.signIn') }}
                </h3>
            </div>
            <a-divider />
            <PassWordForm />
        </template>
    </layout-center>

    <layout-around v-if="layout === 'around'" :hoverShadow="false" :is-bordered="true">
        <template #center>
            <div>
                <div class="has-text-centered mb-4">
                    <h3 class="title is-4">
                        {{ $t('login.signIn') }}
                    </h3>
                </div>
                <a-divider />
                <PassWordForm />
            </div>
        </template>
    </layout-around>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue';
import LayoutCenter from './layout/Center.vue';
import LayoutAround from './layout/Around.vue';
import PassWordForm from './components/PasswordForm.vue';
import { useTokenStore } from '@/stores/token';
import { useMenusStore } from '@/stores/menus';

const { proxy } = getCurrentInstance();
const tokenStore = useTokenStore();
const menusStore = useMenusStore();
// 移除token及用户信息
tokenStore.clearTokenRefresh();
menusStore.clearMenus();

const layout = ref(proxy.$config.LOGIN_LAYOUT);

watch(() => layout.value, (newVal) => {
    if (newVal === 'center') {
        layout.value = 'around'
    } else {
        layout.value = 'center'
    }
})

</script>